<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>优秀作家</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_bk19qw3y1fh.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/award.css">
</head>
<body>
    <header>
        <p class="search w100p rel ml-20 mt-10">
            <i class="iconfont icon-sousuo abs f14"></i>
            <input type="text" class="search-box" placeholder="了不起的面包怪">
        </p>
        <nav class="navigation mt-10 mb-20 flex jc-sa">
            <a class="f18 f666 fw-b" href="./index.html">推荐</a>
            <a class="act f18 f666 fw-b" href="./subject.html">书单</a>
            <a class="f18 f666 fw-b" href="./all.html">全部</a>
        </nav>
    </header>
    <div style="height: 130px;"></div>

    <main>
        <div class="head bg-fff">
            <nav class="mt-10 mb-10 flex jc-sa">
                <a onclick="changeNav(1);" class="link f16 f666 fw-b" href="#">系列</a>
                <a onclick="changeNav(2);" class="link active f16 f666 fw-b" href="#">奖项</a>
                <a onclick="changeNav(3);" class="link f16 f666 fw-b" href="#">作家</a>
            </nav>
        </div>

        <ul class="author">
            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe1.png" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">信谊图画书奖</p>
                    <p class="f14 f666 mt-10">中国台湾最具指标性的幼儿图画书奖</p>
                    <p class="f14 f666 mt-10">46本书</p>
                </div>
            </li>

            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe2.png" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">凯迪克大奖</p>
                    <p class="f14 f666 mt-10">美国最具有权威性的图画书奖，图画书“奥斯卡”</p>
                    <p class="f14 f666 mt-10">154本书</p>
                </div>
            </li>

            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe3.png" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">国际安徒生奖</p>
                    <p class="f14 f666 mt-10">儿童文学最高荣誉，誉为“儿童文学诺贝尔”</p>
                    <p class="f14 f666 mt-10">35本书</p>
                </div>
            </li>
            
            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe4.jpg" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">美国纽伯瑞奖</p>
                    <p class="f14 f666 mt-10">与“国际安徒生奖状齐名”</p>
                    <p class="f14 f666 mt-10">2本书</p>
                </div>
            </li>
            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe5.png" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">白乌鸦书目</p>
                    <p class="f14 f666 mt-10">当今世界最大、最具影响力的专业少儿图书馆之一</p>
                    <p class="f14 f666 mt-10">7本书</p>
                </div>
            </li>
            <li class="flex mt-10 bg-fff">
                <img src="./img/nbe6.png" alt="" class="img">
                <div class="right ml-10 w100p">
                    <p class="title f20 fw-b mt-10">日本绘本大奖</p>
                    <p class="f14 f666 mt-10">亚洲权威绘本大奖，获奖绘本深受国人喜爱</p>
                    <p class="f14 f666 mt-10">15本书</p>
                </div>
            </li>
        </ul>
    </main>

    <div class="blank"></div>
    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link active flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script>
        //切换导航栏
        function changeNav(index) {
        document.querySelector('nav .active').classList.remove('active');
        document.querySelector(`nav .link:nth-child(${index})`).classList.add('active');

        setTimeout(function () {
            //根据index的值去跳转
            if (index === 1) {
                location.href = 'subject.html';
            } else if (index === 2) {
                location.href = 'award.html';
            } else if (index === 3) {
                location.href = 'nice-author.html';
            }
          }, 200)
        }
    </script>
</body>
</html>